<script setup lang="js">

import {sprintf} from 'sprintf-js'
import { computed, ref } from 'vue'

const searchRef = ref('');


const contacats = Array.from({length:10}, (_, i)=>{
  return {
    name:sprintf("chenyifei%03d", Math.floor(Math.random() * 1000)),
    phone:sprintf("1%011d", i * 100000 + Math.floor(Math.random() * 10000))
  }
})

const result = computed(()=>{
  return contacats.filter(item=>{
    return item.name.toLowerCase().includes(searchRef.value.toLowerCase()) || item.phone.includes(searchRef.value)
  })
})

const clickedStates = ref(Array(10).fill(false));

function toggleColor(index) {
  clickedStates.value[index] = !clickedStates.value[index];
}
</script>

<template>
  <q-card class="q-pa-md q-ma-md">
    <p class="text-h5 text-center">陈一非 23211860123</p>
    <q-input v-model="searchRef" type="text" placeholder="请输入Name或者Phone"
    class="q-mb-md" standout="bg-teal text-white"/>
    <div v-for="(item, index) in result" :key="index">

        <q-banner
          :style="{ backgroundColor: clickedStates[index] ? '#bdbdbd' : 'transparent' }"
          @click="toggleColor(index)"
          class="cursor-pointer">
          <p >姓名: {{item.name}}</p>
          <p>电话: {{item.phone}}</p>
        </q-banner>
    </div>
  </q-card>

</template>

<style scoped>

</style>
